<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>轮播图管理</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				<a href="swiper.html">
					<el-button type="text" icon="el-icon-arrow-left">返回</el-button>
				</a>
				<el-button class="f-r" type="primary" icon="el-icon-plus" @click="addSwiper">添加轮播图</el-button>
			</div>
			<div class="pd10">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">					
					<el-form-item>
						<el-input v-model="formInline.name" type="text" placeholder="名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column prop="lunboName" label="名称"></el-table-column>
					<el-table-column label="图片">
						<template slot-scope="scope">
							<img :src="scope.row.lunboPic" min-width="92" height="92" />
						</template>
					</el-table-column>					
					<el-table-column prop="sortNum" label="排序"></el-table-column>
					<el-table-column prop="linkUrl" label="链接地址"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button @click="handleEdit(scope.row)" type="text" size="medium">修改</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="medium" class="color-F56C6C">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 轮播图详情 -->
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="120px">					
				<!-- 上传图片 -->
				<el-form-item label="图片：">
					 <el-upload class="avatar-uploader" :action="ImgApiMore" :show-file-list="false" :on-success="handleAvatarSuccess" accept=".png,.jpg">
						<img v-if="lunboPic" :src="lunboPic" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					 </el-upload>
				</el-form-item>
				  <el-form-item label="图片名称：">
					<el-input type="text" v-model="form.lunboName" style="width:400px;"></el-input>
					</el-form-item>
				  <el-form-item label="排序：">
					<el-input type="text" v-model="form.sortNum" style="width:400px;"></el-input>
				  </el-form-item>
				  <el-form-item label="链接地址：">
					<el-input type="text" v-model="form.linkUrl" style="width:400px;"></el-input>
				  </el-form-item>
				</el-form>				
				<div class="dialog-footer text-r">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="elementui-lib/lib/vue.js"></script>
	<script src="elementui-lib/lib/index.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					id:'',
					ImgbaseUrl: ImgbaseUrl,
					formInline:{
						name:""
					},
					tableData: [{
						id:1,
						lunboName:"轮播图1",
						lunboPic:"https://goss.veer.com/creative/vcg/veer/800water/veer-154192102.jpg",
						sortNum:1,
						linkUrl:"https://goss.veer.com/creative/vcg/veer/800water/veer-154192102.jpg"
					},
					{
						id:2,
						lunboName:"轮播图2",
						lunboPic:"https://goss.veer.com/creative/vcg/veer/800water/veer-138717127.jpg",
						sortNum:2,
						linkUrl:"https://goss.veer.com/creative/vcg/veer/800water/veer-138717127.jpg"
					},					
					{
						id:3,
						lunboName:"轮播图3",
						lunboPic:"https://goss.veer.com/creative/vcg/veer/800water/veer-131712453.jpg",
						sortNum:3,
						linkUrl:"https://goss.veer.com/creative/vcg/veer/800water/veer-131712453.jpg"
					}],					
					// 修改
					title:"",
					dialogFormVisible: false,
					ImgApiMore: uploadPic,
					lunboPic: "",
					form: {
						lunboPic:"",
						lunboName: "",
						sortNum: "",
						linkUrl:""
					},
				}
			},
			methods: {
				search:function(){
					console.log(this.formInline)
				},
				// 添加轮播图
				addSwiper:function(){
					this.title = "添加轮播图"
					this.lunboPic=""
					this.form.lunboPic=""
					this.form.lunboName=""
					this.form.sortNum=""
					this.form.linkUrl=""
					this.dialogFormVisible = true
				},
				handleEdit:function(row){
					console.log(row)
					this.title = "修改轮播图"
					this.dialogFormVisible = true
					this.form.lunboPic=row.lunboPic
					this.form.lunboName=row.lunboName
					this.form.sortNum=row.sortNum
					this.form.linkUrl=row.linkUrl
					this.lunboPic = row.lunboPic
				},
				// 删除
				handleDelete:function(row){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				},
				/* 单张上传图片 */
				handleAvatarSuccess: function(res, file) {
					this.lunboPic = URL.createObjectURL(file.raw);
					this.form.lunboPic = file.name;
				},
				// 确定
				IsNull: function() {
					let flag = false;
					if (this.form.lunboPic == "") {
						this.$message.error('轮播图片不能为空');
						return flag = true;
					}
					if (this.form.lunboName == "") {
						this.$message.error('轮播图名称不能为空');
						return flag = true;
					}
					if (this.form.sortNum == "") {
						this.$message.error('轮播图排序不能为空');
						return flag = true;
					}
					if (this.form.linkUrl == "") {
						this.$message.error('轮播图链接不能为空');
						return flag = true;
					}
				},
				onSubmit:function(){
					let that = this;
					if (that.IsNull()) {
						return;
					}
					console.log('===',this.form)
					
					this.dialogFormVisible = false
				},
			},
			created() {
				this.id = getQueryString("id");
			},
		});
	</script>
</html>
